//
//
//
//
.btn1 {
    pointer-events: all !important;
    display: inline-block;
    position: relative;
    padding: 0 10px !important;
    transition: background 0s !important;
    background-color: rgba(0, 0, 0, 0) !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #2993cc !important;
    background-size: 100% 100% !important;
    background-position: left top !important;
    background-repeat: repeat-x !important;
    background-image: url(./center.png) !important;
    background-clip: content-box !important;
    min-width: 104px;
    min-height: 36px;
    line-height: 36px;
    text-align: center;
    cursor: pointer;
    vertical-align: middle;
    margin: 0 4px;
    user-select: none;

    &[disabled] {
        pointer-events: none !important;
    }

    .before {
        display: block;
        position: absolute !important;
        width: 11px;
        height: 100%;
        left: 0%;
        top: 0;
        background-image: url(./left.png);
        background-size: 100% 100%;
    }

    .after {
        display: block;
        position: absolute !important;
        width: 11px;
        height: 100%;
        right: 0%;
        top: 0;
        background-image: url(./right.png);
        background-size: 100% 100%;
    }

    .span {
        // 这个类的作用是 预加载 3个背景图片,避免使用的时候出现空白
        background-size: 0 0;
        background-image: url(./on_center.png), url(./on_left.png), url(./on_right.png) !important;
    }

    &.active,
    &.on,
    &:hover {
        background-image: url(./on_center.png) !important;
        color: #ffffff !important;
        background-clip: content-box !important;

        .before {
            background-image: url(./on_left.png);
        }

        .after {
            background-image: url(./on_right.png);
        }
    }
}